<template>
<view class="cu-modal drawer-modal justify-end"
	:class="show?'show':''"
	@tap="closeEvent"
	@touchmove.stop.prevent="preventhidden"
>
	<view class="cu-dialog bg-white"
		@tap.stop="preventhidden"
	>
		<scroll-view class="filter-list" 
			scroll-y
		>
			
			<view class="padding-lr" >
				<view class="cu-bar">
					<text class="text-black text-lg text-bold">剧本类型</text>
				</view>
				<view class="grid text-center col-3 margin-bottom-xs">
					<view class="padding-sm radius text-center shadow-blur bg-gray" 
						v-for="(item, indexs) in gameTypeList" 
						:key="indexs"
						:class="gameTypeIndex == indexs?'line':''" 
						@click="selectF(indexs, 'gameTypeIndex')"
					>{{item.name}}</view>
				</view>
			</view>
			<view class="padding-lr">
				<view class="cu-bar ">
					<text class="text-black text-lg text-bold">距离</text>
					<text v-if="distance">{{distance-0<10 ? distance+'km' : '不限'}} </text>
				</view>
				<view class="">
					<slider activeColor="#2EB9C3" 
						:value="distance" 
						block-size="20"
						max="10"
						@changing="sliderChange"
					></slider>
					<view class="slider-text">
						<text class="padding-left-xs">0</text>
						<text>不限</text>
					</view>
				</view>
			</view>
			<view class="padding-lr" >
				<view class="cu-bar">
					<text class="text-black text-lg text-bold">活动时间</text>
				</view>
				<view class="grid text-center col-3 margin-bottom-xs">
					<view class="padding-sm radius text-center shadow-blur bg-gray" 
						v-for="(item, indexs) in gameTimeList" 
						:key="indexs"
						:class="gameTimeIndex == indexs?'line':''" 
						@click="selectF(indexs, 'gameTimeIndex')"
					>{{item.name}}</view>
				</view>
			</view>
			<view class="padding-lr" >
				<view class="cu-bar">
					<text class="text-black text-lg text-bold">活动状态</text>
				</view>
				<view class="grid text-center col-3 margin-bottom-xs">
					<view class="padding-sm radius text-center shadow-blur bg-gray" 
						v-for="(item, indexs) in gameStatusList" 
						:key="indexs"
						:class="gameStatusIndex == indexs?'line':''" 
						@click="selectF(indexs, 'gameStatusIndex')"
					>{{item.name}}</view>
				</view>
			</view>
			
			
			
		</scroll-view>
		<view class="cu-bar justify-center solid-top foot">
			<view class="filter-btn padding-tb-lg">
				<button class="cu-btn line" @click="resetConfig">重置</button>
				<button class="cu-btn bg" @click="affirmConfig">确定</button>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		name: 'gameFilter',
		data() {
			return {
				gameTypeIndex: -1,
				gameTypeList: [
					{
						id: '8001',
						name: '全部',
					}, {
						id: '80010101',
						name: '狼人杀',
					}, {
						id: '80010102',
						name: '谋杀之谜',
					}, {
						id: '80010103',
						name: '密室逃脱',
					}, {
						id: '800101',
						name: '桌游',
					}, {
						id: '800102',
						name: '篮球',
					}, {
						id: '80010201',
						name: '室内篮球',
					}, {
						id: '80010202',
						name: '户外篮球',
					}
				],
				gameTimeIndex: -1,
				gameTimeList: [
					{
						id: '101',
						name: '当天',
					}, {
						id: '102',
						name: '三天内',
					}, {
						id: '103',
						name: '七天内',
					}, {
						id: '104',
						name: '一个月内',
					}
				],
				gameStatusIndex: -1,
				gameStatusList: [
					{
						id: 'S',
						name: '全部',
					}, {
						id: 'P',
						name: '待开局',
					}, {
						id: 'R',
						name: '活动中',
					}
				],
				distance: 0,
			}
		},
		mounted() {
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			preventhidden() {
				return false
			},
			selectF(index, gameType) {
				this[gameType] = index
			},
			closeEvent() {
				this.$emit('closeTap');
			},
			
			resetConfig(){
				this.gameTypeIndex = -1
				this.gameTimeIndex = -1
				this.$emit('resetConfig');
				this.$emit('closeTap');
			},
			affirmConfig(){
				if(this.gameTypeIndex != -1 || this.gameTimeIndex != -1 
				|| this.gameStatusIndex != -1|| this.distance != 0){
					let gametype = this.gameTypeList[this.gameTypeIndex]
					let startdate = this.gameTimeList[this.gameTimeIndex]
					let gamestatus = this.gameStatusList[this.gameStatusIndex]
					let params = {}
					this.distance ? params.disstance = this.distance : null;
					gametype ? params.gametype = gametype.id : null;
					startdate ? params.startdate = startdate.id : null;
					gamestatus ? params.gamestatus = gamestatus.id : null;
					this.$emit('affirmTap', params);
				}
				this.$emit('closeTap');
			}
		}
	}
</script>

<style lang="scss" scoped>
.cu-dialog{
	width: 590upx;
	.filter-list{
		position: absolute;
		left: 0;
		right: 0;
		top: var(--status-bar-height);
		bottom: 145upx;
		.col-3{
			>view{
				width: calc((100% - 60upx)/3);
				transform: translate(0px, 0px);
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				line-height: 1;
				text-align: center;
				margin-right: 30upx;
				margin-bottom: 30upx;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			.line{
				color: #2EB9C3;
				background-color: transparent;
				&::after{
					content: " ";
					display: block;
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border: 1upx solid currentColor;
					transform: scale(0.5);
					transform-origin: 0 0;
					box-sizing: border-box;
					border-radius: 12upx;
					z-index: 1;
					pointer-events: none;
				}
			}
		}
	}
	.cu-btn{
		height: 65upx;
		font-size: 12px;
		min-width: 180upx;
		color: #2EB9C3;
		background-color: #fff;
		~ .cu-btn {
			margin-left: 40upx;
		}
		&::after{
			border: 1px solid #2EB9C3;
		}
		&.bg{
			background-color: #2EB9C3;
			color: #fff;
		}
	}
	.slider-text{
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		margin-top: -10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
}
</style>
